<template>
	<div class="my-detail">
		<van-image :src="product.pic"></van-image>
		<van-cell title="商品编号" :value="product.id" />
		<van-cell title="商品名称" :value="product.title" />
		<van-cell title="商品介绍" :value="product.details" />
		<van-cell title="单价" :value="product.price" />
		<!-- 商品购买区域 -->
		<van-cell>
			<template #default>
				<div class="count-buy">
					<div>购买数量</div>
					<van-stepper v-model="count" integer />
					<van-button type="primary" size="small" @click="onClickAddShopcart">加入购物车
					</van-button>
				</div>
			</template>
		</van-cell>
		<van-button type="primary" size="large" @click="$router.back()">返回</van-button>
	</div>
</template>
<script>
	//1.导入封装后的接口,分别来自2个模块
	import {
		getProductDetailByIdAPI
	} from "@/api/product.js";
	import {
		addCartAPI
	} from "@/api/cart.js";
	export default {
		data() {
			return {
				product: {},
				count: 0,
			}
		},
		//实例创建后获取后端数据
		created() {
			let id = this.$route.params.id; //路由传参
			//2.使用封装后的接口,注意：接口有参数id
			getProductDetailByIdAPI(id).then(result => {
				this.product = result.data; //注意：返回结果的数据结构     
			})
		},
		methods: {
			//处理添加购物车
			onClickAddShopcart() {
				let params = {
					product_id: this.product.id,
					count: this.count,
				};
				//2.使用封装后的接口,注意：接口有参数
				addCartAPI(params).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
			},
		}
	};
</script>
<style scoped>
	.my-detail {
		background-color: #fff;
	}

	.count-buy {
		display: flex;
		flex-direction: row;
		margin: 10px 0px;
		justify-content: space-between;
	}
</style>